<template>
  <div>
    <div class="modal-header">
      <div class="modal-title" v-if="!editionId">{{ l('CreateNewEdition') }}</div>
      <div class="modal-title" v-if="editionId">
        {{ l('EditEdition') }}:
        <span>{{ edition.displayName }}</span>
      </div>
    </div>
    <div class="modal-body">
      <a-form :form="edition" @submit="save()" autocomplete="off" :rules="rules">
        <a-tabs defaultActiveKey="1">
          <!-- 版本属性列表 -->
          <a-tab-pane :tab="l('EditionProperties')" key="1">
            <a-form-item :label="l('EditionName')" name="displayName">
              <a-input v-model:value="edition.displayName" type="text" />
            </a-form-item>
          </a-tab-pane>
          <!-- 特性参数列表 -->
          <a-tab-pane :tab="l('Features')" key="2" forceRender="true">
            <div v-if="editData && editData.features">
              <edition-feature-tree :editData="editData" ref="featureTree"></edition-feature-tree>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </div>
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        {{ l('Cancel') }}
      </a-button>
      <a-button
        :loading="saving"
        :type="'primary'"
        :disabled="edition.displayName?.length > 0 ? false : true"
        @click="save()"
      >
        <i class="acticon acticon-save"></i>
        <span>{{ l('Save') }}</span>
      </a-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { EditionFeatureTree } from '/@/app/admin-shared';
  import { AppEditionExpireAction } from '/@/abpPro/AppEnums';
  import {
    CommonLookupServiceProxy,
    CreateOrUpdateEditionDto,
    EditionEditDto,
    EditionServiceProxy,
    GetEditionEditOutput,
    SubscribableEditionComboboxItemDto,
  } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'CreateOrEditEdition',
    components: { EditionFeatureTree },
    mixins: [ModalComponentBase],
    props: {
      editionIds: {
        type: Number, // 实际传过来的类型
      },
    },
    data() {
      return {
        rules: {
          displayName: [
            {
              max: 32,
              message: this.l('MaxLength', 32),
              trigger: 'blur',
            },
          ],
        },
        editionService: new EditionServiceProxy(),
        commonLookupService: new CommonLookupServiceProxy(),
        editData: new GetEditionEditOutput(),
        edition: new EditionEditDto(),
        editionId: undefined,
        expiringEditions: [] as SubscribableEditionComboboxItemDto[],
        expireAction: '',
        expireActionEnum: AppEditionExpireAction,
        isFree: 'true',
        isTrialActive: false,
        isWaitingDayActive: false,
      };
    },
    mounted() {
      this.show(this.editionIds);
    },
    methods: {
      show(editionId?: number): void {
        this.commonLookupService.getEditionsForCombobox(true).then((editionsResult) => {
          this.expiringEditions = editionsResult.items!;

          this.editionService.getEditionForEdit(editionId).then((editionResult) => {
            this.edition = editionResult.edition;
            this.editData = editionResult;
            this.expireAction =
              this.edition.expiringEditionId! > 0
                ? AppEditionExpireAction.AssignToAnotherEdition
                : AppEditionExpireAction.DeactiveTenant;

            this.isFree =
              !editionResult.edition.monthlyPrice && !editionResult.edition.annualPrice
                ? 'true'
                : 'false';
            this.isTrialActive = editionResult.edition.trialDayCount! > 0;
            this.isWaitingDayActive = editionResult.edition.waitingDayAfterExpire! > 0;
          });
        });
      },
      /** 保存 */
      save(): void {
        const input = new CreateOrUpdateEditionDto();
        input.edition = this.edition;
        input.featureValues = (this.$refs.featureTree as any).getGrantedFeatures();
        this.saving = true;
        this.editionService
          .createOrUpdateEdition(input)
          .finally(() => {
            this.saving = false;
          })
          .then(() => {
            this.notify.success(this.l('SavedSuccessfully'));
            this.success(true);
          });
      },
    },
  });
</script>
